<template>
	<view class="container">
		<!-- 图表显示区域 -->
		<view class="charts-box" @touchmove="viewHistoryData">
			<!-- qiun-data-charts 组件用于显示类型为line的折线图，传入的数据包括图表选项opts和图表数据chartData -->
			<qiun-data-charts type="line" :opts="opts" :chartData="chartData" :ontouch="true" />
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				// 湿度数据
				weight: '',
				// 图表数据对象，包含时间轴(categories)和数据系列(series)
				chartData: {
					categories: [], // 时间轴，用于x轴显示
					series: [{ // 数据系列
						name: '总重量',
						data: [] // 温度数据数组
					}]
				},
				// 图表选项
				opts: {
					color: ["#aaff00"], // 系列颜色
					padding: [15, 10, 0, 15], // 图表内边距
					enableScroll: true, // 启用滚动
					legend: {}, // 图例配置
					xAxis: {
						disableGrid: true, // 禁用网格线
						rotateLabel: true, // 旋转标签
						scrollShow: true, // 显示滚动条
						itemCount: 6, // 视图中的数据点数量
						scrollAlign: "right"
					},
					yAxis: {
						gridType: "dash", // 网格线类型为虚线
						dashLength: 2 // 虚线段长
					},
					extra: {
						line: {
							type: "straight", // 线型为直线
							width: 2, // 线宽
							activeType: "hollow" // 激活点类型为空心
						}
					}
				},

				// 认证令牌
				token: '',
				isviewHistoryData: false, //滑动查看历史数据标志

			}
		},
		onLoad(options) {
			// 页面加载时从本地存储获取认证令牌
			this.token = uni.getStorageSync('token');
		},
		onShow() {
			// 页面显示时获取设备数据，并设置2秒定时刷新数据
			setInterval(() => {
				if (!this.isviewHistoryData) {
					this.fetchDevData();
				}
			}, 2000);
		},
		//下拉刷新
		onPullDownRefresh() {
			this.isviewHistoryData = false;
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		methods: {
			viewHistoryData() {
				this.isviewHistoryData = true;
			},
			fetchDevData() {
				uni.request({
					url: 'https://iot-api.heclouds.com/thingmodel/query-device-property',
					method: 'GET',
					data: {
						product_id: 'qQNSyhm08Q',
						device_name: 'feed_car'
					},
					header: {
						'authorization': this.token
					},
					success: (res) => {
						console.log(res.data)

						let now = new Date();
						let hours = now.getHours().toString().padStart(2, '0');
						let minutes = now.getMinutes().toString().padStart(2, '0');
						let seconds = now.getSeconds().toString().padStart(2, '0');
						let currentTime = `${hours}:${minutes}:${seconds}`;

						this.weight = res.data.data[2].value;

						// 更新categories和series数据而不重新设置整个对象
						if (this.chartData.categories.length > 100) { // 限制数组长度，比如最多100个数据点
							this.chartData.categories.shift();
							this.chartData.series[0].data.shift();
						}

						this.chartData.categories.push(currentTime);
						this.chartData.series[0].data.push(this.weight);

						// 仅触发必要的渲染更新
						this.$forceUpdate();
					},
				});
			},
		}


	}
</script>


<style>
	.container {
		display: flex;
		flex-direction: column;
	}

	.charts-box {
		width: 100%;
		height: 300px;
		/* 设置图表容器的高度 */
	}
</style>